<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>修改头像</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="../../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../../css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="../../css/animate.css" rel="stylesheet">
    <link href="../../css/plugins/ztree/style.css?v=4.1.0" rel="stylesheet">

</head>
<style type="text/css">
    .setOs{
        width: 20%;
        height: 26px;
    }
</style>
<body class="form-horizontal">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="col-sm-6" style="margin-top: 50px;margin-left: 50px ">
    	<div class="form-group">
            <label for="avatar" class="col-sm-3 control-label">头像</label>
            <div class="col-sm-8">
            	<img id="suolue"  height="100px" width="100px"/>
            </div>
        </div>
	    <div class="form-group">
            <label for="avatar" class="col-sm-3 control-label">头像上传</label>
            <div class="col-sm-8">
                <input type="file" style='display: inline-block;'  id="fileInput"/>
            </div>
        </div>
        <div class="form-group">
            <button id="change" class="btn" style="margin-left: 50%;margin-top: 30px" >确定</button>
        </div>
    </div>
</div>
</body>
<!-- 全局js -->
<script src="../../js/jquery.min.js?v=2.1.4"></script>
<script src="../../js/bootstrap.min.js?v=3.3.6"></script>
<!-- 自定义js -->
<script src="../../js/content.js?v=1.0.0"></script>
<!-- Bootstrap table -->
<script src="../../js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../../js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="../../js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="../../js/common/auth.js"></script>

<script type="text/javascript">
    var __changeImg = "/user/update/user";//post
    var __upload = "/upload/temp/image/to/oss" ;//图片上传
    var __getCurrent = "/user/read/current" ;//获取当前用户
    
    $(function(){
    	$$ajax({
	        url: __getCurrent,
	        type: "get",
	        contentType: 'application/json',
	        success: function(response) {
	            if (response.httpCode == 200) {
	                console.log("查询成功");
	                $("#suolue").attr("src",response.data.avatar);
	            } else {
	            	console.log(data.msg);
	            }
	
	            //tableInit.myViewModel.refresh();
	        }
	    });
	    
    })
    
    $("#fileInput").change(function(){
		var file = this.files[0];
	   	if (window.FileReader) {    
            var reader = new FileReader();    
            reader.readAsDataURL(file);    
            //监听文件读取结束后事件    
          	reader.onloadend = function (e) {
            	$("#suolue").attr("src",e.target.result);    //e.target.result就是最后的路径地址
            };    
	    } 
	});
    
    $("#change").click(function(){
    	var avatar;
    	//上传头像
    	var formData = new FormData();
    	formData.append("myfile",$("#fileInput").get(0).files[0]);
    	$.ajax({
            url: __upload,
            type: "POST",
            data: formData,
            /**
            *必须false才会自动加上正确的Content-Type
            */
            contentType: false,
            async:false,
            /**
            * 必须false才会避开jQuery对 formdata 的默认处理
            * XMLHttpRequest会对 formdata 进行正确的处理
            */
            processData: false,
            success: function (data) {
            	if (data.httpCode == "200") {
                	avatar = data.urls[0];
                    //alert("上传成功！");
                }else{
                	console.log(data.msg);
                }
            },
            error: function () {
                alert("上传失败！！请检查本地网络!");
            }
        });
    	
        $$ajax({
            url: __changeImg,
            type: 'post',//提交的方式
            dataType:'json',
            contentType:"application/json; charset=utf-8",
            data:JSON.stringify({avatar:avatar}),
            success: function(data) {
                if (data.httpCode==200) {
                    console.log(data.msg)
                    alert("头像修改成功")
                    window.location.href= "/login.html";
                } else{
                    alert(data.msg);
                }
            }

        });
    })

</script>

</html>